<template>
	<div>
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<div class="regBox" v-if="is_show">
					<div class="regBox_pub"></div>
					<div class="regBox_main regBox_mainTow"  style="background-color:transparent;border-color:transparent;height:auto;">
						<!-- <b>{{$t('h_indexHeader.title1')}}</b> -->

						<div class="formsTow" style="justify-content: center;align-items: center;" @click="navigate_tk()">
							<img :src="config.is_alert_url" alt="" style="width: 100%; height: 100%; object-fit: cover;">
							<!-- <div v-html="config.is_alert_url"></div> -->
							<!-- 先不用 -->
							<!-- <div class="newitem" v-for="(item,index) in newmanList" :key="index">
								<div class="msg">
									<span>{{$t('h_indexHeader.title2')}}{{item.money}}，{{$t('h_indexHeader.title3')}}{{item.send_money}}</span>
									<div class="jindu">
										<div class="jindu_active"
											:style="'width:'+(recharge_money/item.money*100)+'%;'"></div>
										<i>{{recharge_money}}/{{item.money}}</i>
									</div>
								</div>
								<div class="gore">
									<button v-if="(recharge_money/item.money*100)<100" @click="gorecharge">{{$t('h_indexHeader.title4')}}</button>
									<button v-else
										style="background-color: var(--theme-disabled-bg-color);">{{$t('h_indexHeader.title5')}}</button>
									<div class="money">
										<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_sqb_cny--sprite"></use>
											</svg></i>
										<span>{{item.send_money}}</span>
									</div>
								</div>
							</div> -->

						</div>

						<!-- <div class="notmsg">
							<div class="msg">
								<el-checkbox v-model="checked"  @change="handleCheckAllChange">
								</el-checkbox>
								<span>{{$t('h_indexHeader.title6')}}</span>
							</div>
						</div> -->

						<div class="closeBtnTow" @click="closeForget">

						</div>
					</div>
					<!-- <div class="regBox_main regBox_mainTow" style="height: auto;">
						<b>{{$t('h_indexHeader.title1')}}</b>

						<div class="formsTow" style="height: 80%;padding: 0 15px;">
							<div class="newitem" v-for="(item,index) in newmanList" :key="index">
								<div class="msg">
									<span>{{$t('h_indexHeader.title2')}}{{item.money}}，{{$t('h_indexHeader.title3')}}{{item.send_money}}</span>
									<div class="jindu">
										<div class="jindu_active"
											:style="'width:'+(recharge_money/item.money*100)+'%;'"></div>
										<i>{{recharge_money}}/{{item.money}}</i>
									</div>
								</div>
								<div class="gore">
									<button v-if="(recharge_money/item.money*100)<100" @click="gorecharge">{{$t('h_indexHeader.title4')}}</button>
									<button v-else
										style="background-color: var(--theme-disabled-bg-color);">{{$t('h_indexHeader.title5')}}</button>
									<div class="money">
										<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_sqb_cny--sprite"></use>
											</svg></i>
										<span>{{item.send_money}}</span>
									</div>
								</div>
							</div>

						</div>

						<div class="notmsgTow">
							<div class="msg">
								<el-checkbox v-model="checked"  style="msgcheckbox"  @change="handleCheckAllChange">
								</el-checkbox>
								<span>{{$t('h_indexHeader.title6')}}</span>
							</div>
						</div>

						<div class="closeBtnTow" @click="closeForget">

						</div>
					</div> -->
				</div>

				<div class="regBox" v-if="is_show2">
					<div class="regBox_pub"></div>
					<div class="regBox_main regBox_mainTow"  style="background-color:transparent;border-color:transparent;height:auto;">
						<!-- <b>{{$t('h_indexHeader.title1')}}</b> -->

						<div class="formsTow" style="justify-content: center;align-items: center;" @click="navigate_tk2()">
							<img :src="config.dl_tk_img" alt="" style="width: 100%; height: 100%; object-fit: cover;">
							<!-- <div v-html="config.is_alert_url"></div> -->
							<!-- 先不用 -->
							<!-- <div class="newitem" v-for="(item,index) in newmanList" :key="index">
								<div class="msg">
									<span>{{$t('h_indexHeader.title2')}}{{item.money}}，{{$t('h_indexHeader.title3')}}{{item.send_money}}</span>
									<div class="jindu">
										<div class="jindu_active"
											:style="'width:'+(recharge_money/item.money*100)+'%;'"></div>
										<i>{{recharge_money}}/{{item.money}}</i>
									</div>
								</div>
								<div class="gore">
									<button v-if="(recharge_money/item.money*100)<100" @click="gorecharge">{{$t('h_indexHeader.title4')}}</button>
									<button v-else
										style="background-color: var(--theme-disabled-bg-color);">{{$t('h_indexHeader.title5')}}</button>
									<div class="money">
										<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_sqb_cny--sprite"></use>
											</svg></i>
										<span>{{item.send_money}}</span>
									</div>
								</div>
							</div> -->

						</div>

						<!-- <div class="notmsg">
							<div class="msg">
								<el-checkbox v-model="checked"  @change="handleCheckAllChange">
								</el-checkbox>
								<span>{{$t('h_indexHeader.title6')}}</span>
							</div>
						</div> -->

						<div class="closeBtnTow" @click="closeForget2">

						</div>
					</div>
					<!-- <div class="regBox_main regBox_mainTow" style="height: auto;">
						<b>{{$t('h_indexHeader.title1')}}</b>

						<div class="formsTow" style="height: 80%;padding: 0 15px;">
							<div class="newitem" v-for="(item,index) in newmanList" :key="index">
								<div class="msg">
									<span>{{$t('h_indexHeader.title2')}}{{item.money}}，{{$t('h_indexHeader.title3')}}{{item.send_money}}</span>
									<div class="jindu">
										<div class="jindu_active"
											:style="'width:'+(recharge_money/item.money*100)+'%;'"></div>
										<i>{{recharge_money}}/{{item.money}}</i>
									</div>
								</div>
								<div class="gore">
									<button v-if="(recharge_money/item.money*100)<100" @click="gorecharge">{{$t('h_indexHeader.title4')}}</button>
									<button v-else
										style="background-color: var(--theme-disabled-bg-color);">{{$t('h_indexHeader.title5')}}</button>
									<div class="money">
										<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_sqb_cny--sprite"></use>
											</svg></i>
										<span>{{item.send_money}}</span>
									</div>
								</div>
							</div>

						</div>

						<div class="notmsgTow">
							<div class="msg">
								<el-checkbox v-model="checked"  style="msgcheckbox"  @change="handleCheckAllChange">
								</el-checkbox>
								<span>{{$t('h_indexHeader.title6')}}</span>
							</div>
						</div>

						<div class="closeBtnTow" @click="closeForget">

						</div>
					</div> -->
				</div>

			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="regBox" v-if="is_show">
					
					<div class="regBox_pub"></div>
					<div class="regBox_main" style="background-color:transparent;border-color:transparent;height:auto;">
						<div class="forms" @click="navigate_tk()">
							<img :src="config.is_alert_url" alt="" style="width: 100%; height: 100%; object-fit: cover;">
						

						</div>


						<div class="closeBtn" @click="closeForget">

						</div>
					</div>
				</div>

				<div class="regBox" v-if="is_show2">
					
					<div class="regBox_pub"></div>
					<div class="regBox_main" style="background-color:transparent;border-color:transparent;height:auto;">
						<div class="forms" @click="navigate_tk2()">
							<img :src="config.dl_tk_img" alt="" style="width: 100%; height: 100%; object-fit: cover;">
						

						</div>


						<div class="closeBtn" @click="closeForget2">

						</div>
					</div>
				</div>

			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				is_show: false,
				is_show2: false,
				step: 0,
				checked: false,
				recharge_money: 0,
				newmanList: [
				],
				config:{}
			};
		},
		mounted() {
			// if(localStorage.getItem('token')){
			// 	this.getNewTask()
			// }
			this.godownloadapp()
		},
		methods: {
			godownloadapp(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						console.log('ddd',res.data[1].value);
						that.config=res.data[1].value;
									// 			if(res.data[1].value.is_alert_on==0){
			// 				this.opennewmanbox()
			// 			}
						// window.open(res.data[0].value)
						// that.$router.push('../../index/downloadapp?url=' + res.data[0].value)
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			navigate_tk2(){
				window.location.href=this.config.dl_tk_url;
				// this.$router.push({
				// 	path: this.config.right_url
				// })
			},
			navigate_tk(){
				window.location.href=this.config.tk_url;
				// this.$router.push({
				// 	path: this.config.right_url
				// })
			},
			gorecharge(){
				this.$router.push('../../recharge/recharge')
			},
			openForget2() {
				// this.getNewTask()
				this.is_show2 = true
			},
			closeForget2() {
				// localStorage.setItem("checked",'1')
				this.is_show2 = false;
			},
			openForget() {
				// this.getNewTask()
				this.is_show = true
			},
			closeForget() {
				localStorage.setItem("checked",'1')
				this.is_show = false;
			},
			handleCheckAllChange(){
				if(this.checked){
					localStorage.setItem("checked",'1')
				}else{
					localStorage.setItem("checked",'2')
				}
			},
			getNewTask(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.newTask({},(res)=>{
					loading.close();
					if(res.code == 0){
						console.log(res.data);
						this.recharge_money=res.data.allMoney;
						this.newmanList=res.data.list;
					}else{
						if(res.code != 201){
							// this.$message.error(res.msg);
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.regBox {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		height: 100vh;
		overflow-y: overlay;
		top: 0;
		left: 0;
.regBox_mainTow{
    border-radius: 10px;
    top: 20vh;
    width:40%;
    height:70%;
	b{
		margin: 10px 0px;
		    color: var(--theme-text-color-darken);
		    font-size: 20px;
			height: 35px;
	}
	.formsTow{
		height: 100%;
		overflow-x: hidden;
		overflow-y: overlay;
		padding: 0 15px;
		display: flex;
		flex-direction: column;
	}
}
		.closeBtn {
			position: absolute;
			border-radius: 50%;
			z-index: 3;
			bottom: -1rem;
			// bottom: -.9rem;
			left: 0;
			right: 0;
			margin: auto;
			width: 0.5984rem;
			height: 0.5984rem;
			background-image: url(/icons/main.png);
			background-position: -5.1136rem -4.2024rem;
			background-size: 8.296rem 7.7928rem;
		}
.closeBtnTow{
	position: absolute;
	border-radius: 50%;
	z-index: 3;
	    bottom: -45px;
	    left: 0;
	    right: 0;
	    margin: auto;
	    width: 35px;
	    height: 35px;
	    background-image: url(/icons/main.png);
	    background-position: -276px 195px;
	    background-size: 450px 420px;
		cursor: pointer;
}
		&_pub {
			position: fixed;
			z-index: 1;
			width: 100vw;
			height: 100vh;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, .6);
		}

		&_main {
			position: absolute;
			z-index: 2;
			background-color: var(--theme-bg-color);
			border: thin solid;
			border-color: var(--theme-color-line);
			border-radius: 0.2rem;
			position: absolute;
			top: 26vh;
			left: 0;
			right: 0;
			width: 6rem;
			height: 7rem;
			margin: auto;

			.formsTow {
				height: 5rem;
				overflow-x: hidden;
				overflow-y: overlay;
				padding: 0 0.16rem;
				display: flex;
				flex-direction: column;

				.newitem {
					display: flex;
					background: var(--theme-main-bg-color);
					border-radius: 5px;
					align-items: flex-start;
					padding: 10px 10px 0 5px;
					margin-bottom: 10px;

					.msg {
						flex: 1;

						span {
							display: block;
							font-size: 15px;
							line-height: 35px;
							color: var(--theme-text-color-darken);
							margin-top: 5px;
						}

						.jindu {
							height: 15px;
							background: var(--theme-text-color-placeholder);
							border-radius: 10px;
							width: 60%;
							font-size: 14px;
							line-height: 15px;
							margin-top: 5px;
							position: relative;
							overflow: hidden;

							&_active {
								position: absolute;
								height: 20px;
								left: 0;
								top: 0;
								width: 20%;
								background-color: var(--theme-primary-color);
							}

							i {
								display: block;
								text-align: center;
								color: var(--theme-text-color-process-text);
								font-style: normal;
								position: relative;
								z-index: 11;
							}
						}
					}



					.gore {
						text-align: right;

						button {
							display: block;
							border-radius: 5px;
							font-size: 13px;
							cursor: pointer;
							height:30px;
							padding: 0 5px;
							width: 100px;
							word-break: break-all;
							background-color: var(--theme-primary-color);
							color: var(--theme-primary-font-color);
						}

						.money {
							text-align: right;
							display: flex;
							align-items: center;
							font-size: 18px;
							justify-content: flex-end;
							color: var(--theme-secondary-color-finance);

							i {
								align-items: center;
								color: var(--theme-secondary-color-finance);
								display: block;
								font-size: 20px;
								margin-top: 5px;
								line-height: 30px;
							}

							span {
								display: block;
								line-height: 30px;
								font-size: 16px;
								color: var(--theme-secondary-color-finance);
							}
						}

					}
				}
			}

			.forms {
				// height: 5rem;
				overflow-x: hidden;
				overflow-y: overlay;
				padding: 0 0.16rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
    align-items: center;

				.newitem {
					display: flex;
					background: var(--theme-main-bg-color);
					border-radius: 0.1rem;
					align-items: flex-start;
					padding: 0.17rem 0.17rem 0 0.2rem;
					margin-bottom: .2rem;

					.msg {
						flex: 1;

						span {
							display: block;
							font-size: .24rem;
							line-height: .31rem;
							color: var(--theme-text-color-darken);
							margin-top: 0.09rem;
						}

						.jindu {
							height: .2rem;
							background: var(--theme-text-color-placeholder);
							border-radius: .2rem;
							width: 2.6rem;
							font-size: .16rem;
							line-height: .22rem;
							margin-top: .2rem;
							position: relative;
							overflow: hidden;

							&_active {
								position: absolute;
								height: .2rem;
								left: 0;
								top: 0;
								width: 20%;
								background-color: var(--theme-primary-color);
							}

							i {
								display: block;
								text-align: center;
								color: var(--theme-text-color-process-text);
								font-style: normal;
								position: relative;
								z-index: 11;
							}
						}
					}



					.gore {
						text-align: right;

						button {
							display: block;
							border-radius: 0.14rem;
							font-size: .2rem;
							height: 0.5rem;
							padding: 0 0.04rem;
							width: 1.2rem;
							word-break: break-all;
							background-color: var(--theme-primary-color);
							color: var(--theme-primary-font-color);
						}

						.money {
							text-align: right;
							display: flex;
							align-items: center;
							font-size: .28rem;
							justify-content: flex-end;
							color: var(--theme-secondary-color-finance);

							i {
								align-items: center;
								color: var(--theme-secondary-color-finance);
								display: block;
								font-size: .36rem;
								margin-top: 0.08rem;
								line-height: .36rem;
							}

							span {
								display: block;
								line-height: .36rem;
								font-size: .28rem;
								color: var(--theme-secondary-color-finance);
							}
						}

					}

				}
			}

			.notmsg {
				margin: .3rem .2rem;

				.msg {
					display: flex;
					margin-bottom: .3rem;

					span {
						font-size: .26rem;
						color: var(--theme-text-color-lighten);
						margin: 0 0 0 .1rem;
					}

					i {
						font-size: .26rem;
						font-style: normal;
						color: var(--theme-primary-color);
						border: 1px solid var(--theme-text-color-lighten);
					}
				}
			}
			.notmsgTow{
				margin: 15px 15px;
				
				.msg {
					display: flex;
					margin-bottom: 10px;
				
					span {
						font-size: 13px;
						color: var(--theme-text-color-lighten);
						margin: 0 0 0 10px;
					}
				
					i {
						font-size: 13px;
						font-style: normal;
						color: var(--theme-primary-color);
						border: 1px solid var(--theme-text-color-lighten);
					}
				}
				/deep/.el-checkbox__inner {
				   width: 20px !important;
				       height:20px !important;
					   margin-top: 0px !important;
				}
				/deep/.el-checkbox__inner::after {
				  width: 5px !important;
				      height: 11px !important;
					  left: 7px !important;
					      top: 2px !important;
				}
			}

			.el-input {
				margin: 0 0 .32rem;
			}

			p {
				font-size: .18rem;
				height: 0.4rem;
				line-height: 1;
				color: var(--theme-secondary-color-error);
				margin: .16rem 0 .06rem .16rem;
				opacity: .7;
			}

			b {
				margin: 0.2rem 0 0.4rem;
				color: var(--theme-text-color-darken);
				font-size: .26rem;
				font-weight: 700;
				height: 0.34rem;
				display: block;
				text-align: center;
			}

			.submit {
				background-color: var(--theme-primary-color);
				border-color: var(--theme-primary-color);
				border-radius: 0.14rem;
				height: .8rem;
				line-height: .8rem;
				display: block;
				color: var(--theme-primary-font-color);
				font-size: .24rem !important;
			}

			.aas {
				display: flex;
				margin: .3rem 0;

				span {
					flex: 1;
					display: block;
					text-align: center;
					font-size: .24rem;
					color: var(--theme-primary-color);
				}
			}
		}
	}
</style>